<template>
  <div class="padding text-sm">
    <el-row :gutter="10" type="flex" class="flex-wrap">
      <el-col :lg="12" :md="24">
        <el-card style="height:100%">
          <div slot="header" class="clearfix relative">
            <span class="title-icon">客户预报信息</span>
            <el-button
              type="success"
              size="mini"
              v-if="forecastForm.orderLocked != 1 && verifyShow.waybInfoEdit"
              class="header-save-btn"
              @click="changeForecastInfo"
            >
              编辑
            </el-button>
          </div>
          <el-form
            size="mini"
            label-position="left"
            label-width="128px"
            class="show-text"
          >
            <el-row class="" :gutter="30">
              <el-col :span="12">
                <!-- <span>目的国家:</span> -->
                <el-form-item prop="countryId">
                  <div slot="label">目的国家:</div>
                  <span>{{ countryOptions[forecastForm.countryId] }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="目的仓库类型："
                  prop="purposeWarehouseType"
                >
                  <span>
                    {{
                      initMap.stockTypeMap[forecastForm.purposeWarehouseType]
                    }}
                  </span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="" :gutter="30">
              <el-col :span="12">
                <el-form-item prop="provinceId">
                  <div slot="label">国内分区:</div>
                  <span>{{
                    initMap.countryStateMap[forecastForm.provinceId]
                  }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="dispatchAddressCode">
                  <div slot="label">仓库代码:</div>
                  <span v-if="forecastForm.purposeWarehouseType !== 700">{{
                    forecastForm.dispatchAddressCode
                  }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="loadingPort">
                  <div slot="label">起运地:</div>
                  <span>
                    {{ addressOptions[forecastForm.loadingPort] }}
                  </span>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item prop="dispatcher">
                  <div slot="label">公司名/个人:</div>

                  <span>{{ forecastForm.dispatcher }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item prop="inStockChannel">
                  <div slot="label">渠道:</div>

                  <span
                    style="color:red;"
                    @dblclick="
                      jumpToChannelDetails(forecastForm.inStockChannel)
                    "
                  >
                    {{ channelOptions[forecastForm.inStockChannel] }}
                  </span>
                </el-form-item>
              </el-col>
              <el-col
                :span="12"
                v-if="
                  (forecastForm.purposeWarehouseType === 400 &&
                    (!verifyShow.saler ||
                      !verifyShow.saleAssistant ||
                      verifyShow.superAdmin)) ||
                    forecastForm.purposeWarehouseType !== 400
                "
              >
                <el-form-item prop="dispatchLinkMan">
                  <div slot="label">联系人:</div>

                  <span>{{ forecastForm.dispatchLinkMan }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="isBuyInsurance">
                  <div slot="label" style="width:250px;">
                    PVA/增值税递延:
                  </div>
                  <span
                    style="color:red;"
                    v-if="
                      forecastForm.countryId === 330 &&
                        forecastForm.purposeWarehouseType !== 700 &&
                        forecastForm.isTaxFarming !== 1 &&
                        forecastForm.isPVA !== null &&
                        forecastForm.isPVA !== ''
                    "
                    >{{ yesNo[forecastForm.isPVA] }}</span
                  >
                </el-form-item>
              </el-col>
              <el-col
                :span="12"
                v-if="
                  (forecastForm.purposeWarehouseType === 400 &&
                    (!verifyShow.saler ||
                      !verifyShow.saleAssistant ||
                      verifyShow.superAdmin)) ||
                    forecastForm.purposeWarehouseType !== 400
                "
              >
                <el-form-item prop="dispatchPhone">
                  <div slot="label">电话:</div>
                  <span>{{ forecastForm.dispatchPhone }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item prop="abilitys">
                  <div slot="label">渠道能力:</div>
                  <div v-for="(item, k) in abilitys" :key="k">
                    <span>{{ initMap.channelAbilitysMap[item] }}</span>
                  </div>
                </el-form-item>
              </el-col>
              <el-col
                :span="12"
                v-if="
                  (forecastForm.purposeWarehouseType === 400 &&
                    (!verifyShow.saler ||
                      !verifyShow.saleAssistant ||
                      verifyShow.superAdmin)) ||
                    forecastForm.purposeWarehouseType !== 400
                "
              >
                <el-form-item prop="dispatchProvince">
                  <div slot="label">州/省:</div>

                  <span>{{ forecastForm.dispatchProvince }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item prop="specialProducts">
                  <div slot="label">特殊产品:</div>
                  <div
                    v-if="
                      null != Constatvariable.specialProduct &&
                        Constatvariable.specialProduct != '' &&
                        Constatvariable.specialProduct != '-1'
                    "
                  >
                    <div v-for="(item, k) in specialProducts" :key="k">
                      <span>{{ specialProductOptions[item] }}</span>
                    </div>
                  </div>
                  <div v-else>
                    <span>均不是</span>
                  </div>
                </el-form-item>
              </el-col>
              <el-col
                :span="12"
                v-if="
                  (forecastForm.purposeWarehouseType === 400 &&
                    (!verifyShow.saler ||
                      !verifyShow.saleAssistant ||
                      verifyShow.superAdmin)) ||
                    forecastForm.purposeWarehouseType !== 400
                "
              >
                <el-form-item prop="dispatchCity">
                  <div slot="label">城市:</div>
                  <span>{{ forecastForm.dispatchCity }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="customerActualWeight">
                  <div slot="label">实重(KG):</div>
                  <span>{{ forecastForm.customerActualWeight }}</span>
                </el-form-item>
              </el-col>
              <el-col
                :span="12"
                v-if="
                  (forecastForm.purposeWarehouseType === 400 &&
                    (!verifyShow.saler ||
                      !verifyShow.saleAssistant ||
                      verifyShow.superAdmin)) ||
                    forecastForm.purposeWarehouseType !== 400
                "
              >
                <el-form-item prop="dispatchZipCode">
                  <div slot="label">邮编:</div>
                  <span>{{ forecastForm.dispatchZipCode }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="customerVolume">
                  <div slot="label">体积(CBM):</div>

                  <span>{{ forecastForm.customerVolume }}</span>
                </el-form-item>
              </el-col>
              <el-col
                :span="12"
                v-if="
                  (forecastForm.purposeWarehouseType === 400 &&
                    (!verifyShow.saler ||
                      !verifyShow.saleAssistant ||
                      verifyShow.superAdmin)) ||
                    forecastForm.purposeWarehouseType !== 400
                "
              >
                <el-form-item prop="dispatchZipCode">
                  <div slot="label">邮箱:</div>
                  <span>{{ forecastForm.dispatchEmail }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="customerCalVolume">
                  <div slot="label">计算体积:</div>
                  <span>{{ forecastForm.customerCalVolume }}</span>
                </el-form-item>
              </el-col>
              <el-col
                :span="12"
                v-if="
                  (forecastForm.purposeWarehouseType === 400 &&
                    (!verifyShow.saler ||
                      !verifyShow.saleAssistant ||
                      verifyShow.superAdmin)) ||
                    forecastForm.purposeWarehouseType !== 400
                "
              >
                <el-form-item prop="dispatchAddress">
                  <div slot="label">详细地址:</div>
                  <span>{{ forecastForm.dispatchAddress }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="customerChargedWeight">
                  <div slot="label">计费重:</div>
                  <span>{{ forecastForm.customerChargedWeight }}</span>
                </el-form-item>
              </el-col>

              <el-col
                :span="12"
                v-if="
                  (forecastForm.purposeWarehouseType === 400 &&
                    (!verifyShow.saler ||
                      !verifyShow.saleAssistant ||
                      verifyShow.superAdmin)) ||
                    forecastForm.purposeWarehouseType !== 400
                "
              >
                <el-form-item prop="dispatchAddress">
                  <div slot="label">详细地址2:</div>
                  <span>{{ forecastForm.dispatchAddress2 }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="customerTotalPackages">
                  <div slot="label">件数:</div>
                  <span>{{ forecastForm.customerTotalPackages }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="isBuyInsurance">
                  <div slot="label">是否购买保险:</div>
                  <span>{{ yesNo[forecastForm.isBuyInsurance] }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item
                  prop="mergerDeclarationNo"
                  v-if="
                    forecastForm.mergerDeclarationNo &&
                      forecastForm.mergerDeclarationNo != ''
                  "
                >
                  <div slot="label">合并报关:</div>
                  <el-tooltip
                    :content="forecastForm.mergerDeclarationNo"
                    style="color: red;"
                    placement="top"
                    effect="light"
                  >
                    <el-button>合</el-button>
                  </el-tooltip>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item prop="deliveryTerms">
                  <div slot="label">交货条款:</div>
                  <span>
                    {{ forecastForm.deliveryTerms }}
                  </span>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item prop="isTaxFarming">
                  <div slot="label">是否包税:</div>
                  <span>{{ yesNo[forecastForm.isTaxFarming] }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="cdate">
                  <div slot="label">下单时间:</div>
                  <span>{{ forecastForm.cdate }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item prop="isCustomerDeclaration">
                  <div slot="label">是否报关:</div>
                  <span>{{ yesNo[forecastForm.isCustomerDeclaration] }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="etInStock">
                  <div slot="label">预计入仓时间:</div>
                  <span>{{ forecastForm.etInStock }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="selfDelivered">
                  <div slot="label">是否自送:</div>
                  <span>{{
                    forecastForm.selfDelivered == 0 ? "是" : "否"
                  }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="" :gutter="30">
              <el-col :span="12">
                <el-form-item prop="deliveryType">
                  <div slot="label">派送方式:</div>
                  <span>{{ deliveryTypes[forecastForm.deliveryType] }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="declareSheet">
                  <div slot="label">是否上传报关底单:</div>
                  <span>{{
                    forecastForm.declareSheet != null &&
                    forecastForm.declareSheet == 1
                      ? "是"
                      : "否"
                  }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="forecastForm.selfDelivered">
                <el-form-item prop="pickUpGoodsAddres">
                  <div slot="label">装柜地址:</div>
                  <span>{{ forecastForm.pickUpGoodsAddres }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="storageLocation">
                  <div slot="label">库位:</div>
                  <span>{{ stockOptions[forecastForm.storageLocation] }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="forecastForm.customerRemark">
                <el-form-item prop="customerRemark">
                  <div slot="label" style="color:red;">客户备注:</div>
                  <span style="color:red;">
                    {{ forecastForm.customerRemark }}
                  </span>
                </el-form-item>
              </el-col>
              <el-col
                :span="12"
                v-if="
                  forecastForm.countryId == 339 &&
                    forecastForm.isTaxFarming == 0
                "
              >
                <el-form-item prop="isChinaAustraliaCard">
                  <div slot="label">是否委托制作中澳证:</div>
                  <span>
                    {{ forecastForm.isChinaAustraliaCard == 0 ? "否" : "是" }}
                  </span>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="forecastForm.operationRemark">
                <el-form-item prop="customerRemark">
                  <div slot="label" style="color:red;">操作备注:</div>
                  <span
                    style="color:red;"
                    v-html="forecastForm.operationRemark"
                  >
                  </span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="" :gutter="30">
              <!--亚马逊推送显示出口报关单号-->
              <el-col :span="12" v-if="forecastForm.ordersByFba == 3">
                <el-form-item prop="shipDate">
                  <div slot="label" style="color:red;">shipDate:</div>
                  <span style="color:red;" v-html="forecastForm.shipDate">
                  </span>
                </el-form-item>
              </el-col>
              <!--亚马逊推送显示出口报关单号-->
              <el-col :span="12" v-if="forecastForm.ordersByFba == 3">
                <el-form-item prop="exportLicenceNumber">
                  <div slot="label">出口报关单号:</div>
                  <span>{{ forecastForm.exportLicenceNumber }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="" :gutter="30">
              <el-col :span="12" v-if="forecastForm.shippingWay == 'FCL'">
                <el-form-item prop="cabinetInfo">
                  <div slot="label">柜量*柜型:</div>
                  <span>{{ forecastForm.cabinetInfo }}</span>
                </el-form-item>
              </el-col>
              <el-col
                :span="12"
                v-if="[700, 800].includes(forecastForm.purposeWarehouseType)"
              >
                <el-form-item prop="cabinetInfo">
                  <div slot="label">入仓号/入仓预约链接:</div>
                  <span>{{ forecastForm.deliveryNumber }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>

      <el-col :lg="12" :md="24">
        <el-row :gutter="5" type="flex" class="flex-wrap">
          <el-col :lg="8" :md="24">
            <el-card class="margin-bottom" style="height: 100%">
              <div slot="header" class="clearfix relative">
                <span class="title-icon">入库信息</span>
                <el-button
                  size="mini"
                  type="info"
                  class="header-cancel-btn"
                  v-if="isChangeinStockInfo"
                  @click="isChangeinStockInfo = false"
                  >取消</el-button
                >
                <el-button
                  v-if="
                    verifyShow.waybInfoEdit && forecastForm.orderLocked != 1
                  "
                  type="success"
                  size="mini"
                  class="header-save-btn"
                  @click="changeInStockInfo"
                >
                  {{ isChangeinStockInfo ? "保存" : "编辑" }}
                </el-button>
              </div>
              <el-form size="mini" label-position="left" label-width="50%">
                <el-form-item prop="inStockActualWeight">
                  <div slot="label">实重(KGS):</div>
                  <el-input
                    v-if="isChangeinStockInfo"
                    v-model="stockInfo.inStockActualWeight"
                    clearable
                  />
                  <span v-else>{{ stockInfo.inStockActualWeight }}</span>
                </el-form-item>
                <el-form-item prop="inStockVolume">
                  <div slot="label">体积(CBM):</div>
                  <el-input
                    v-if="isChangeinStockInfo"
                    v-model="stockInfo.inStockVolume"
                    clearable
                  />
                  <span v-else>{{ stockInfo.inStockVolume }}</span>
                </el-form-item>
                <el-form-item
                  prop="inStockCalVolume"
                  v-if="stockInfo.inStockCalVolume"
                >
                  <div slot="label">计算体积(KGS/数值):</div>
                  <span>{{ stockInfo.inStockCalVolume }}</span>
                </el-form-item>
                <el-form-item prop="inStockActualWeight">
                  <div slot="label">体积重(KGS):</div>
                  <el-input
                    v-if="isChangeinStockInfo"
                    v-model="stockInfo.inStockVolumeWeight"
                    clearable
                  />
                  <span v-else>{{ stockInfo.inStockVolumeWeight }}</span>
                </el-form-item>
                <el-form-item prop="inStockActualWeight">
                  <div slot="label">计费重(KGS/CBM):</div>
                  <el-input
                    v-if="isChangeinStockInfo"
                    v-model="stockInfo.inStockChargedWeight"
                    clearable
                  />
                  <span v-else>{{ stockInfo.inStockChargedWeight }}</span>
                </el-form-item>
                <el-form-item prop="inStockActualWeight">
                  <div slot="label">入库件数:</div>
                  <el-input
                    v-if="isChangeinStockInfo"
                    v-model="stockInfo.inStockTotalPackages"
                    clearable
                  />
                  <span v-else>{{ stockInfo.inStockTotalPackages }} </span>
                  <el-button type="text" @click="viewInstock"
                    >查看详情</el-button
                  >
                </el-form-item>

                <el-form-item prop="arrivalTotalPackages">
                  <div slot="label">到仓件数:</div>
                  <span>{{ stockInfo.arrivalTotalPackages }}</span>
                </el-form-item>
                <el-form-item prop="inStockOperationId">
                  <div slot="label">入库操作人:</div>
                  <span>{{ userOptions[stockInfo.inStockOperationId] }}</span>
                </el-form-item>
              </el-form>
            </el-card>
          </el-col>
          <el-col :lg="8" :md="24">
            <el-card class="margin-bottom" style="height: 100%">
              <div slot="header" class="clearfix relative">
                <span class="title-icon">出库信息</span>
                <el-button
                  size="mini"
                  type="info"
                  class="header-cancel-btn"
                  v-if="isChangeStockInfo"
                  @click="isChangeStockInfo = false"
                  >取消</el-button
                >
                <el-button
                  v-if="
                    verifyShow.waybInfoEdit && forecastForm.orderLocked != 1
                  "
                  type="success"
                  size="mini"
                  class="header-save-btn"
                  @click="changeStockInfo"
                >
                  {{ isChangeStockInfo ? "保存" : "编辑" }}
                </el-button>
              </div>
              <el-form size="mini" label-position="left" label-width="50%">
                <el-form-item prop="serviceActualWeight">
                  <div slot="label">实重(KGS):</div>

                  <el-input
                    v-if="isChangeStockInfo"
                    v-model="stockInfo.serviceActualWeight"
                    clearable
                  />
                  <span v-else>{{ stockInfo.serviceActualWeight }}</span>
                </el-form-item>
                <el-form-item prop="serviceVolume">
                  <div slot="label">体积(CBM):</div>

                  <el-input
                    v-if="isChangeStockInfo"
                    v-model="stockInfo.serviceVolume"
                    clearable
                  />
                  <span v-else>{{ stockInfo.serviceVolume }}</span>
                </el-form-item>
                <el-form-item prop="serviceVolumeWeight">
                  <div slot="label">体积重(KGS):</div>

                  <el-input
                    v-if="isChangeStockInfo"
                    v-model="stockInfo.serviceVolumeWeight"
                    clearable
                  />
                  <span v-else>{{ stockInfo.serviceVolumeWeight }}</span>
                </el-form-item>
                <el-form-item prop="serviceChargedWeight">
                  <div slot="label">计费重(KGS/CBM):</div>

                  <el-input
                    v-if="isChangeStockInfo"
                    v-model="stockInfo.serviceChargedWeight"
                    clearable
                  />
                  <span v-else>{{ stockInfo.serviceChargedWeight }}</span>
                </el-form-item>
                <el-form-item prop="serviceTotalPackages">
                  <div slot="label">件数:</div>

                  <el-input
                    v-if="isChangeStockInfo"
                    v-model="stockInfo.serviceTotalPackages"
                    clearable
                  />
                  <div v-else class="flex justify-between">
                    <span>{{ stockInfo.serviceTotalPackages }}</span>
                  </div>
                </el-form-item>
                <el-form-item prop="outStockChannel">
                  <div slot="label">出库渠道:</div>
                  <span>{{
                    seriviceChannelMap[stockInfo.outStockChannel]
                  }}</span>
                </el-form-item>
                <el-row class="row-item">
                  <el-col :span="12">
                    <span>出库操作人:</span>
                  </el-col>
                  <el-col :span="12">
                    <span>{{
                      userOptions[stockInfo.outStockOperationId]
                    }}</span>
                  </el-col>
                </el-row>
              </el-form>
            </el-card>
          </el-col>
          <el-col :lg="8" :md="24">
            <el-card class="margin-bottom" style="height: 100%">
              <div slot="header" class="clearfix relative">
                <span class="title-icon">对比</span>
              </div>
              <el-row class="row-item">
                <el-col :span="12">
                  <span>实重(KGS):</span>
                </el-col>
                <el-col :span="12">
                  <span
                    >{{
                      parseFloat(
                        stockInfo.inStockActualWeight -
                          stockInfo.serviceActualWeight
                      ).toFixed(3)
                    }}
                  </span>
                </el-col>
              </el-row>
              <el-row class="row-item">
                <el-col :span="12">
                  <span>体积(CBM):</span>
                </el-col>
                <el-col :span="12">
                  <span
                    >{{
                      parseFloat(
                        stockInfo.inStockVolume - stockInfo.serviceVolume
                      ).toFixed(3)
                    }}
                  </span>
                </el-col>
              </el-row>
              <el-row class="row-item">
                <el-col :span="12">
                  <span>体积重(KGS):</span>
                </el-col>
                <el-col :span="12">
                  <span
                    >{{
                      parseFloat(
                        stockInfo.inStockVolumeWeight -
                          stockInfo.serviceVolumeWeight
                      ).toFixed(3)
                    }}
                  </span>
                </el-col>
              </el-row>
              <el-row class="row-item">
                <el-col :span="12">
                  <span>计费重(KGS/CBM):</span>
                </el-col>
                <el-col :span="12">
                  <span
                    >{{
                      parseFloat(
                        stockInfo.inStockChargedWeight -
                          stockInfo.serviceChargedWeight
                      ).toFixed(3)
                    }}
                  </span>
                </el-col>
              </el-row>
              <el-row class="row-item">
                <el-col :span="12">
                  <span>件数:</span>
                </el-col>
                <el-col :span="12">
                  <span>{{
                    stockInfo.inStockTotalPackages -
                      stockInfo.serviceTotalPackages
                  }}</span>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>

        <el-card class="margin-top" v-if="stockInfo.shippingWay != 'AIR'">
          <div slot="header" class="clearfix relative">
            <span class="title-icon">发件人信息</span>
            <el-button
              size="mini"
              type="info"
              class="header-cancel-btn"
              v-if="isChangeSenderInfo"
              @click="isChangeSenderInfo = false"
              >取消</el-button
            >
            <el-button
              v-if="verifyShow.waybInfoEdit && forecastForm.orderLocked != 1"
              type="success"
              size="mini"
              class="header-save-btn"
              @click="changeSenderInfo"
            >
              {{ isChangeSenderInfo ? "保存" : "编辑" }}
            </el-button>
          </div>
          <el-form size="mini" label-position="left" label-width="98px">
            <el-row class="" :gutter="20">
              <el-col :span="12">
                <el-form-item prop="senderCompany">
                  <div slot="label">发件人:</div>
                  <el-input
                    v-if="isChangeSenderInfo"
                    v-model="senderInfo.senderCompany"
                    clearable
                  />
                  <div class="icoFontlist" v-else>
                    {{ senderInfo.senderCompany }}
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="senderPhone">
                  <div slot="label">电话:</div>
                  <el-input
                    v-if="isChangeSenderInfo"
                    v-model="senderInfo.senderPhone"
                    clearable
                  />
                  <span v-else>{{ senderInfo.senderPhone }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="senderLinkMan">
                  <div slot="label">联系人:</div>
                  <el-input
                    v-if="isChangeSenderInfo"
                    v-model="senderInfo.senderLinkMan"
                    clearable
                  />
                  <span v-else>{{ senderInfo.senderLinkMan }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="senderAdress">
                  <div slot="label">详细地址:</div>
                  <el-input
                    v-if="isChangeSenderInfo"
                    v-model="senderInfo.senderAdress"
                    clearable
                  />
                  <span v-else>{{ senderInfo.senderAdress }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="senderEmail">
                  <div slot="label">邮箱:</div>
                  <el-input
                    v-if="isChangeSenderInfo"
                    v-model="senderInfo.senderEmail"
                    clearable
                  />
                  <span v-else>{{ senderInfo.senderEmail }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <el-card class="margin-top">
          <div slot="header" class="clearfix relative">
            <span
              class="title-icon"
              style="color:#0081ff;"
              @dblclick="
                jumpToCustomerImportDetails(Constatvariable.customerId)
              "
              >进口商信息</span
            >
            <span
              v-if="
                importInfo.isVatAndEori == 1 && importInfo.eoriIsCertified == 1
              "
              style="color:green;margin-left:20px;"
              >已认证</span
            >
            <span v-else style="color:red;margin-left:20px;">未认证</span>
            <el-button
              size="mini"
              type="info"
              class="header-cancel-btn"
              v-if="isChangeImportInfo"
              @click="isChangeImportInfo = false"
              >取消</el-button
            >
            <el-button
              v-if="
                verifyShow.waybInfoEdit &&
                  forecastForm.orderLocked != 1 &&
                  forecastForm.isTaxFarming != 1
              "
              type="success"
              size="mini"
              class="header-save-btn"
              @click="changeImportInfo"
            >
              {{ isChangeImportInfo ? "保存" : "编辑" }}
            </el-button>
          </div>
          <el-form size="mini" label-position="left" label-width="98px">
            <el-row class="" :gutter="20">
              <el-col :span="12">
                <el-form-item prop="isVatAndEori">
                  <div slot="label">自有VAT/EORI:</div>
                  <el-select
                    v-if="isChangeImportInfo"
                    v-model="importInfo.isVatAndEori"
                    placeholder="自有VAT/EORI"
                    style="width:80px"
                  >
                    <el-option
                      v-for="(k, v) in yesNo"
                      :key="v"
                      :label="yesNo[v]"
                      :value="parseInt(v)"
                    ></el-option>
                  </el-select>

                  <span v-else>{{
                    importInfo.isVatAndEori ? "是" : "否"
                  }}</span>
                  <template v-if="importInfo.isVatAndEori == 1">
                    <el-checkbox
                      style="color:#F59A23"
                      v-if="
                        forecastForm.isTaxFarming != 1 &&
                          isChangeImportInfo &&
                          ![330, 331, 334, 335, 336, 349, 371, 372].includes(
                            Number(forecastForm.countryId)
                          )
                      "
                      v-model="importInfo.isJiufangImporter"
                      @change="changeJiufangImporter"
                      :true-label="parseInt(1)"
                      :false-label="parseInt(0)"
                      >{{
                        importInfo.isJiufangImporter
                          ? "已选择九方进口商"
                          : "选择九方进口商"
                      }}</el-checkbox
                    >
                    <span v-else style="margin-left:30%;color:green">{{
                      importInfo.isJiufangImporter ? "已选择九方进口商" : ""
                    }}</span>
                    <el-button
                      v-if="
                        forecastForm.isTaxFarming != 1 && isChangeImportInfo
                      "
                      class="margin-left-lg"
                      type="text"
                      @click="clickSelectBtn"
                    >
                      选择客户进口商
                    </el-button>
                  </template>
                </el-form-item>
              </el-col>
              <div v-if="!importInfo.isJiufangImporter">
                <el-col :span="12">
                  <el-form-item prop="importerLinkMan">
                    <div slot="label">联系人:</div>

                    <el-input
                      v-if="isChangeImportInfo"
                      v-model="importInfo.importerLinkMan"
                      clearable
                    />
                    <span v-else>{{ importInfo.importerLinkMan }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="importerCompanyName">
                    <div slot="label">公司名:</div>

                    <el-input
                      v-if="isChangeImportInfo"
                      v-model="importInfo.importerCompanyName"
                      clearable
                    />
                    <span v-else>{{ importInfo.importerCompanyName }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="importerPhone">
                    <div slot="label">电话:</div>

                    <el-input
                      v-if="isChangeImportInfo"
                      v-model="importInfo.importerPhone"
                      clearable
                    />
                    <span v-else>{{ importInfo.importerPhone }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="vat">
                    <div slot="label">VAT:</div>

                    <el-input
                      v-if="isChangeImportInfo"
                      v-model="importInfo.vat"
                      clearable
                    />
                    <span v-else @click="gotoVatNetAddress">{{
                      importInfo.vat
                    }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="importerZipCode">
                    <div slot="label">邮编:</div>

                    <el-input
                      v-if="isChangeImportInfo"
                      v-model="importInfo.importerZipCode"
                      clearable
                    />
                    <span v-else>{{ importInfo.importerZipCode }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="eori">
                    <div slot="label">EORI:</div>

                    <el-input
                      v-if="isChangeImportInfo"
                      v-model="importInfo.eori"
                      clearable
                    />
                    <span v-else @click="gotoRoriNetAddress">{{
                      importInfo.eori
                    }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="importerAddress">
                    <div slot="label">详细地址:</div>

                    <el-input
                      v-if="isChangeImportInfo"
                      v-model="importInfo.importerAddress"
                      clearable
                    />
                    <span v-else>{{ importInfo.importerAddress }}</span>
                  </el-form-item>
                </el-col>
              </div>
            </el-row>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog title="编辑客户预报信息" :visible.sync="centerDialogVisible">
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="padding-40">
          <EditWaybillInfo
            ref="selectChannelLeftComp"
            :order-type="orderType"
            :Constatvariable="Constatvariable"
            :forecastForm="forecastForm"
            :initMap="initMap"
            :channelInitMap="channelInitMap"
            @saveInfo="saveInfo"
            width="120%"
          />
        </el-col>
      </el-row>
    </el-dialog>
    <el-dialog
      title=""
      :visible.sync="selectImporterType"
      :before-close="closeDialog"
    >
      <div slot="title">
        <el-row class="flex align-center">
          <el-col :span="4">
            <span>选择进口商</span>
          </el-col>
          <el-col :span="6">
            <el-select
              v-model="searchCountry"
              filterable
              clearable
              size="mini"
              placeholder="请选择国家"
            >
              <el-option
                v-for="(item, index) in initOptionsData.countryMap"
                :key="index"
                :label="item"
                :value="parseInt(index)"
              />
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-input
              type="text"
              v-model="searchWaybillRender"
              size="mini"
              placeholder="vat"
              clearable
            ></el-input>
          </el-col>
          <el-col :span="6">
            <el-input
              type="text"
              v-model="searchCompany"
              size="mini"
              placeholder="公司"
              clearable
            ></el-input>
          </el-col>
        </el-row>
      </div>
      <div id="dialogMain" class="dialog-main" ref="dialogMain">
        <el-card
          v-for="(item, index) in waybillRenderFilter"
          :key="index"
          class="card-main padding-bottom-sm"
          :class="{ selectCart: item.selectType, inEdit: !item.editType }"
        >
          <div class="icon-edit flex align-center justify-end">
            <span
              v-if="item.editType && item.isNew"
              class="text-red margin-right text-sm"
              @click.stop="delNewData(index)"
            >
              删除
            </span>
            <i
              v-if="!item.editType"
              class="el-icon-edit-outline text-df"
              @click.stop="editImporter(index)"
            />
            <template v-else>
              <span
                v-if="!item.isNew"
                class="margin-right"
                @click.stop="cancelForm(`importerForm${index}`, index)"
              >
                取消
              </span>
              <span @click.stop="saveForm(`importerForm${index}`, index)">
                保存
              </span>
            </template>
          </div>
          <el-form
            :ref="`importerForm${index}`"
            :model="item"
            label-position="left"
            label-width="98px"
            size="mini"
            :show-message="false"
            :rules="importerRules"
            @click.native="selectCard(index)"
            @dblclick.native="selectedCard(index)"
          >
            <el-row>
              <el-col :xs="20" :sm="20" :md="20" :lg="20">
                <el-form-item label="进口商公司名:" prop="importerCompany">
                  <el-input
                    v-if="item.editType"
                    v-model="item.importerCompany"
                    clearable
                  />
                  <span v-else>{{ item.importerCompany }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="margin-top-sm">
              <el-col :md="12" :lg="8">
                <el-form-item label="国家:" prop="importerCountry">
                  <!-- <el-input
                    v-if="item.editType"
                    v-model="item.importerCountry"
                    clearable
                  /> -->
                  <el-select
                    v-if="item.editType"
                    v-model="item.importerCountry"
                    filterable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="(v, i) in initOptionsData.countryMap"
                      :key="i"
                      :label="v"
                      :value="parseInt(i)"
                    />
                  </el-select>
                  <span v-else>
                    {{ countryOptions[item.importerCountry] }}
                  </span>
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="8">
                <el-form-item
                  label="联系人:"
                  prop="importerAttn"
                  class="text-right"
                >
                  <el-input
                    v-if="item.editType"
                    v-model="item.importerAttn"
                    clearable
                  />
                  <span v-else>{{ item.importerAttn }}</span>
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="8">
                <el-form-item
                  label="电话:"
                  prop="importerPhone"
                  class="text-right"
                >
                  <el-input
                    v-if="item.editType"
                    v-model="item.importerPhone"
                    clearable
                  />
                  <span v-else>{{ item.importerPhone }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row class="margin-top-sm">
              <el-col :md="12" :lg="8">
                <el-form-item label="VAT:" prop="vat">
                  <el-input v-if="item.editType" v-model="item.vat" clearable />
                  <span v-else>{{ item.vat }}</span>
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="8">
                <el-form-item label="EORI:" prop="eori" class="text-right">
                  <el-input
                    v-if="item.editType"
                    v-model="item.eori"
                    clearable
                  />
                  <span v-else>{{ item.eori }}</span>
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="8">
                <el-form-item
                  label="邮编:"
                  prop="importerZipCode"
                  class="text-right"
                >
                  <el-input
                    v-if="item.editType"
                    v-model="item.importerZipCode"
                    clearable
                  />
                  <span v-else>{{ item.importerZipCode }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item
              label="进口商地址:"
              prop="importerAddress"
              class="margin-top-sm"
            >
              <el-input
                v-if="item.editType"
                v-model="item.importerAddress"
                clearable
              />
              <span v-else>{{ item.importerAddress }}</span>
            </el-form-item>
          </el-form>
        </el-card>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="success" @click="addImporter"
          >新 增</el-button
        >
        <el-button size="mini" type="primary" @click="selectImporterFn"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <ViewInStockData
      ref="ViewInStockData"
      :subWaybills="subWaybills"
      :Constatvariable="Constatvariable"
    >
    </ViewInStockData>
  </div>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";
import axios from "axios";
import * as constant from "@/store/yg/common/constant";
import EditWaybillInfo from "../components/EditWaybillInfo";
import ViewInStockData from "../components/ViewInStockData";

export default {
  components: {
    EditWaybillInfo,
    ViewInStockData
  },
  props: {
    verifyShow: {
      type: Object,
      default: function() {
        return {};
      }
    },
    Constatvariable: {
      type: Object,
      default: function() {
        return {};
      }
    },
    initOptionsData: {
      type: Object,
      default: function() {
        return {};
      }
    },
    provinceNameAndIdMap: {
      type: Object,
      default: function() {
        return {};
      }
    },
    orderType: {
      type: String,
      default: "seaairwaybill"
    }
  },
  data() {
    return {
      initMap: {
        countryStateMap: this.initOptionsData["countryStateMap"],
        countryMap: this.initOptionsData["countryMap"],
        shippingAddressMap: this.initOptionsData["shippingAddressMap"],
        shippingFbaStockMap: this.initOptionsData["shippingFbaStockMap"],
        channelAbilitysMap: this.initOptionsData["channelAbilitysMap"],
        specialProductsMap: this.initOptionsData["specialProductsMap"],
        provinceNameAndIdMap: this.initOptionsData["stateMap"],
        stockTypeMap: this.initOptionsData["stockTypeMap"],
        customerImportMap: this.initOptionsData["customerImportMap"]
      },
      channelInitMap: {},
      addressList: {},
      publicData: {
        shippingWayMap: {}
      },
      centerDialogVisible: false,
      selectImporterType: false,
      deliveryTypes: {
        1: "拆柜派送",
        0: "整柜直送"
      },
      yesNo: {
        1: "是",
        0: "否"
      },
      fbas: {
        1: "是",
        0: "否",
        2: "FBC"
      },

      selectInstockChannel: true,
      isShowChangeForecastInfo: false,
      isChangeinStockInfo: false,
      isChangeStockInfo: false,
      isChangeSenderInfo: false,
      isChangeImportInfo: false,
      //查询渠道参数
      channelQueryParams: {
        channelLoadingPortId: "", //发货地ID
        countryId: "", //目的国ID
        provinceId: "", //国内省ID
        weight: "", //重量 查询出库渠道不用传
        volumn: "", //体积 查询出库渠道不用传
        channelAbility: "", //渠道能力
        specialProduct: "", //特殊产品
        other: "", //
        customerId: "", //客户ID
        type: "", //客户渠道查询：0代表查询，1代表下单。服务商渠道查询：0代表查询客户渠道下的，1代表查询满足条件的所有
        customerChannelId: "", //客户渠道ID
        instockTime: "", //入库时间
        cabinetMeasure: "", //柜量(如果有值 运费=单价*柜量)
        finalWeight: "" //查询出库渠道传此值（根据入库渠道计算出的最终计费的值）
      },
      //目的仓库
      stockTypeMap: {},
      //国家下拉
      countryOptions: this.initOptionsData["countryMap"],
      //分区下拉
      stateOptions: this.initOptionsData["stateMap"],
      // 起运地下拉
      addressOptions: this.initOptionsData["shippingAddressMap"],
      //渠道下拉
      channelOptions: this.initOptionsData["channelMap"],
      //特殊产品下拉
      specialProductOptions: this.initOptionsData["specialProductsMap"],
      //用户下拉
      userOptions: this.initOptionsData["userMap"],
      //仓库下拉
      stockOptions: this.initOptionsData["stockMap"],

      seriviceChannelMap: this.initOptionsData["serviceChnnelMap"],

      forecastForm: {
        //运单ID
        id: "",
        countryId: "",
        mergerDeclarationNo: "", //合并报关单号
        isFba: "",
        customerActualWeight: "",
        customerVolume: "",
        provinceId: "",
        deliveryTerms: "",
        customerChargedWeight: "",
        loadingPort: "",
        isTaxFarming: "",
        customerTotalPackages: "",
        inStockChannel: "",
        isCustomerDeclaration: 0,
        dispatchAddressCode: "",
        dispatcher: "",
        dispatchLinkMan: "",
        dispatchPhone: "",
        dispatchProvince: "",
        dispatchCity: "",
        dispatchZipCode: "",
        dispatchAddress: "",
        dispatchAddress2: "",
        isBuyInsurance: 0,
        houseNumber: "",
        customerCalVolume: null,
        pickUpGoodsAddres: "",
        customerRemark: "",
        ordersByFba: 0,
        exportLicenceNumber: "",
        shipDate: ""
      },
      abilitys: [],
      specialProducts: [],
      //渠道能力下拉
      channelAbilitys: {
        3: "普货（无任何电池）",
        12: "内置电池",
        14: "配套电池",
        25: "纯电池",
        26: "空调",
        34: "小磁性",
        35: "内电+配电",
        37: "少量液体",
        45: "小磁性(加磁检费)",
        46: "其他(粉末/膏状/颗粒/气体/刀具)"
      },
      stockInfo: {
        id: 0,
        inStockActualWeight: 12, //实重
        inStockVolume: 12, //入库体积
        inStockVolumeWeight: 12, //入库体积重
        inStockChargedWeight: 12, // 入库计费重
        inStockTotalPackages: 12, //入库件数
        inStockOperationId: "Jack", // 入库操作人
        serviceActualWeight: 12, //出库实重
        serviceVolume: 12, // 出库体积
        serviceVolumeWeight: 12, //出库体积重
        serviceChargedWeight: 12, // 出库计费重
        serviceTotalPackages: 12, //出库件数
        outStockOperationId: "Jack" //出库操作人
      },
      senderInfo: {
        id: 0,
        senderCompany: "", // 发件人
        senderLinkMan: "", // 联系人：
        senderPhone: "", // 联系电话：
        senderAdress: "", // 详细地址：
        senderEmail: ""
      },
      waybillId: 0,
      importInfo: {
        id: 0,
        eoriIsCertified: 1, //认证
        isVatAndEori: 1, //自有VAT/EORI
        importerCompanyName: 1, //进口商公司名：
        importerAddress: 1, //进口商详细地址：
        importerZipCode: 1, //邮编
        importerLinkMan: 1, // 联系人
        importerPhone: 1, // 进口商联系人电话：
        vat: 1,
        eori: 1,
        isJiufangImporter: 1
      },
      //常量
      constants: {
        id: "",
        customerId: "",
        referenceNo: "",
        provinceId: "",
        fbaId: "",
        ddpId: "",
        dduId: "",
        yesTaxFarmingId: "",
        noTaxFarmingId: "",
        inStockActualWeight: "",
        inStockVolume: "",
        oldShippingWay: ""
      },
      otherReversalMap: this.initOptionsData["otherReversalMap"],
      otherMap: {},
      subWaybills: [],
      waybillRender: [],
      searchCountry: "",
      searchWaybillRender: "",
      searchCompany: "",
      importerRules: {
        importerCompany: [
          {
            required: true,
            message: "请填写进口公司名",
            trigger: "blur"
          },
          {
            pattern: /^[a-zA-Z0-9_\,\'\.\/\-\s\!\@\#\$\%\^\&\*\(\)]*$/,
            message: "请填写英文或者数字"
          }
        ],
        importerPhone: [
          {
            required: true,
            message: "请填写电话",
            trigger: "blur"
          }
          // {
          //   pattern: /^[\+ 0-9\-]*$/,
          //   message: '请填写数字'
          // }
        ],
        importerAttn: [
          {
            required: true,
            message: "请填写联系人",
            trigger: "blur"
          },
          {
            pattern: /^[a-zA-Z0-9_\,\'\.\/\-\s\!\@\#\$\%\^\&\*\(\)]*$/,

            message: "请填写英文或者数字"
          }
        ],
        importerCountry: [
          {
            required: true,
            message: "请选择国家",
            trigger: "change"
          }
        ],
        vat: [
          {
            required: true,
            message: "请填写VAT",
            trigger: "blur"
          },
          {
            pattern: /^[a-zA-Z0-9_\,\.\/\-\s\!\@\#\$\%\^\&\*\(\)]*$/,
            message: "请填写英文或者数字"
          }
        ],
        eori: [
          {
            required: true,
            message: "请填写EORI",
            trigger: "blur"
          },
          {
            pattern: /^[a-zA-Z0-9_\,\.\/\-\s\!\@\#\$\%\^\&\*\(\)]*$/,
            message: "请填写英文或者数字"
          }
        ],
        importerZipCode: [
          { required: true, message: "请填写邮编", trigger: "blur" },
          {
            pattern: /^[a-zA-Z0-9_\,\'\.\/\-\s\!\@\#\$\%\^\&\*\(\)]*$/,
            message: "请填写英文或者数字"
          }
        ],
        importerAddress: [
          {
            required: true,
            message: "请填写进口商地址",
            trigger: "blur"
          },
          {
            pattern: /^[a-zA-Z0-9_\,\'\.\/\-\s\!\@\#\$\%\^\&\*\(\)]*$/,
            message: "请填写英文或者数字"
          }
        ]
      },
      timer: null,
      attrs: {
        class: "com.tofba.app.client.customer.CustomerImporterClient",
        uri: "/open/message",
        type: "blank"
      }
    };
  },
  mounted() {
    console.log("xxxxxxxxxxxxxxxxxxxxxxx", this.initOptionsData);
    this.getInfo();
  },
  computed: {
    waybillRenderFilter() {
      let list = [];
      // console.log("this.waybillRender :>> ", this.waybillRender);
      if (
        this.searchWaybillRender &&
        this.searchCountry &&
        this.searchCompany
      ) {
        list = this.waybillRender.filter(
          x =>
            x.vat &&
            x.vat.indexOf(this.searchWaybillRender) > -1 &&
            x.importerCountry === this.searchCountry &&
            x.importerCompany &&
            x.importerCompany.indexOf(this.searchCompany) > -1
        );
      } else if (
        this.searchWaybillRender &&
        !this.searchCountry &&
        !this.searchCompany
      ) {
        list = this.waybillRender.filter(
          x => x.vat && x.vat.indexOf(this.searchWaybillRender) > -1
        );
      } else if (
        !this.searchWaybillRender &&
        this.searchCountry &&
        !this.searchCompany
      ) {
        list = this.waybillRender.filter(
          x => x.importerCountry === this.searchCountry
        );
      } else if (
        !this.searchWaybillRender &&
        !this.searchCountry &&
        this.searchCompany
      ) {
        list = this.waybillRender.filter(
          x =>
            x.importerCompany &&
            x.importerCompany.indexOf(this.searchCompany) > -1
        );
      } else {
        list = this.waybillRender;
      }

      return list;
    }
  },
  watch: {
    Constatvariable: {
      handler(nVal, oVal) {
        console.log("change data!");
        this.forecastForm = this.Constatvariable;
        //** 不知道哪里还是有不正常的数据 */
        if (this.forecastForm.isCustomerDeclaration == 42) {
          this.forecastForm.isCustomerDeclaration = 0;
        }
        if (this.forecastForm.isCustomerDeclaration == 43) {
          this.forecastForm.isCustomerDeclaration = 1;
        }
        this.constants.id = this.Constatvariable["id"];
        this.constants.customerId = this.Constatvariable["customerId"];

        this.constants.referenceNo = this.Constatvariable["referenceNo"];
        this.constants.provinceId = this.Constatvariable["provinceId"];
        this.constants.inStockVolume = this.Constatvariable["inStockVolume"];
        this.constants.inStockActualWeight = this.Constatvariable[
          "inStockActualWeight"
        ];
        this.constants.oldShippingWay = this.Constatvariable["shippingWay"];
        this.stockInfo = this.Constatvariable;
        this.senderInfo = this.Constatvariable;
        this.importInfo = this.Constatvariable;
        this.waybillId = this.Constatvariable["id"];
        console.log("mmmmmmmmmmmmmm", this.Constatvariable["abilitys"]);
        if (this.Constatvariable["abilitys"]) {
          this.abilitys = this.Constatvariable["abilitys"];
        }
        if (
          null != this.Constatvariable["specialProduct"] &&
          "" != this.Constatvariable["specialProduct"] &&
          typeof this.Constatvariable["specialProduct"] == "string"
        ) {
          this.specialProducts = this.Constatvariable["specialProduct"].split(
            ","
          );
        }
        if (
          this.Constatvariable.selfDelivered === 0 &&
          this.Constatvariable.etInStock
        ) {
          const etInStock = this.Constatvariable.etInStock.split(" ");
          this.Constatvariable.etInStockDay = etInStock[0];
          this.Constatvariable.etInStockTime = etInStock[1];
        }
      },
      deep: true,
      immediate: true
    }
  },

  methods: {
    gotoVatNetAddress() {
      var netAddress = "";
      //英国
      if (this.Constatvariable.countryId === 330) {
        netAddress =
          "https://www.tax.service.gov.uk/check-vat-number/enter-vat-details";
      } else {
        //欧盟
        netAddress =
          "https://ec.europa.eu/taxation_customs/vies/vatResponse.html";
      }
      var a = document.createElement("a");
      a.setAttribute("href", netAddress);
      a.setAttribute("target", "_blank");
      a.click();
    },

    gotoRoriNetAddress() {
      var netAddress = "";
      //英国
      if (this.Constatvariable.countryId === 330) {
        netAddress = "https://www.tax.service.gov.uk/check-eori-number/result";
      } else {
        //欧盟
        netAddress =
          "https://ec.europa.eu/taxation_customs/dds2/eos/eori_validation.jsp?Lang=en&EoriNumb";
      }
      var a = document.createElement("a");
      a.setAttribute("href", netAddress);
      a.setAttribute("target", "_blank");
      a.click();
    },

    saveInfo() {
      this.centerDialogVisible = false;
      this.$emit("initWaybillData");
    },
    viewInstock() {
      var param = {};
      param["id"] = this.waybillId;
      ajax("viewInStockData", param).then(
        res => {
          if (res.code != 200) {
            this.$message.error("无入库信息");
          } else {
            this.subWaybills = res.data;
            if (this.subWaybills) {
              this.subWaybills.forEach(element => {
                element.labelUrl = constant.FILE_SERVER + element.labelUrl;
              });
            }
            this.$refs.ViewInStockData.centerDialogVisible = true;
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    selectImporterFn() {
      if (this.waybillRenderFilter && this.waybillRenderFilter.length > 0) {
        let target = [];
        for (const i of this.waybillRenderFilter) {
          console.log("i.selectType :>> ", i.selectType);
          if (i.editType) {
            this.$message({
              message: "请先保存！",
              type: "warning"
            });
            return false;
          }
          if (i.selectType) {
            target.push(i);
          }
        }

        if (target.length === 0) {
          this.$message({
            message: "请选择一个进口商",
            type: "warning"
          });
          return false;
        } else {
          this.$message({
            message: "选择了进口商",
            type: "success"
          });
          // console.log(i)

          this.selectImporterType = false;

          this.importInfo = {
            importerAddress: target[0].importerAddress,
            importerCompanyName: target[0].importerCompany,
            importerLinkMan: target[0].importerAttn,
            importerPhone: target[0].importerPhone,
            importerZipCode: target[0].zipCode,
            vat: target[0].vat,
            eori: target[0].eori,
            customerImporterId: target[0].id
          };
        }
      } else {
        this.$message({
          message: "请先填写进口商信息",
          type: "warning"
        });
      }
    },
    // 新增进口商
    addImporter() {
      this.$refs.dialogMain.scrollTop = 0;
      const newData = {
        editType: true,
        isNew: true,
        selectType: false,
        id: "",
        importerCompany: "",
        importerCountry: "",
        importerAttn: "",
        importerPhone: "",
        vat: "",
        zipCode: "",
        eori: "",
        importerAddress: "",
        defaultValue: 1
      };
      // let list = []
      if (this.waybillRender && this.waybillRender.length > 0) {
        // list = clone(this.waybillRender)
        this.waybillRender.unshift(newData);
      } else {
        this.waybillRender.push(newData);
      }

      // this.$delete(this.waybillRender, 'customerImporter')
      // this.$set(this.waybillRender, 'customerImporter', list)
    },
    // 单击加效果
    selectCard(index) {
      const time = this.timer;
      clearTimeout(time); // 首先清除计时器
      this.timer = setTimeout(() => {
        for (const i in this.waybillRenderFilter) {
          this.$delete(this.waybillRenderFilter[i], "selectType");
          if (parseInt(i) === index) {
            this.$set(this.waybillRenderFilter[index], "selectType", true);
          } else {
            this.waybillRenderFilter[i].selectType = false;
          }
        }
        console.log("单击", this.waybillRenderFilter);
      }, 300); // 大概时间300ms
    },
    // 双击=> 选择该进口商
    selectedCard(index) {
      const time = this.timer;
      clearTimeout(time);
      if (this.waybillRenderFilter[index].editType) {
        this.$message({
          message: "请先保存！",
          type: "warning"
        });
        return false;
      }
      this.selectImporterType = false;

      this.importInfo = {
        importerAddress: this.waybillRenderFilter[index].importerAddress,
        importerCompanyName: this.waybillRenderFilter[index].importerCompany,

        importerLinkMan: this.waybillRenderFilter[index].importerAttn,

        importerPhone: this.waybillRenderFilter[index].importerPhone,

        importerZipCode: this.waybillRenderFilter[index].zipCode,
        vat: this.waybillRenderFilter[index].vat,
        eori: this.waybillRenderFilter[index].eori,
        customerImporterId: this.waybillRenderFilter[index].id,
        isVatAndEori: 1,
        isJiufangImporter: 0
      };
    },
    // 保存进口商信息
    saveForm(formName, index) {
      this.$refs[formName][0].validate(valid => {
        if (valid) {
          this.importerSave(index);
        } else {
          return false;
        }
      });
    },
    // 调用保存进口商信息
    async importerSave(index) {
      const importerInfo = this.waybillRenderFilter[index];
      importerInfo["cuser"] = this.constants.customerId;

      console.log("importerInfo :>> ", importerInfo);
      importerInfo.zipCode = importerInfo.importerZipCode;
      const data = await ajax("saveCustomerImporter", importerInfo, this.attrs);
      if (data.code === 200) {
        this.waybillRenderFilter[index].editType = false;

        if (this.waybillRenderFilter[index].isNew) {
          this.$delete(this.waybillRenderFilter[index], "isNew");
          // importerInfo["id"] = null;
        }
        if (!this.waybillRenderFilter[index].id) {
          this.$set(this.waybillRenderFilter[index], "id", data.data);
        }
        this.$message({
          message: "保存成功",
          type: "success"
        });
        // this.$store.dispatch('createWaybill/initWaybillRender')
      } else {
        this.$message.error(data.message);
      }
    },
    cancelForm(formName, index) {
      this.waybillRenderFilter[index].editType = false;
    },
    editImporter(index) {
      // 进入编辑状态
      this.$delete(this.waybillRender[index], "editType");
      this.$set(this.waybillRender[index], "editType", true);
    },
    delNewData(index) {
      console.log("index :>> ", index);
      this.$confirm("是否删除该项?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.waybillRender.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {});
    },
    // 关闭弹窗
    closeDialog(done) {
      // console.log(done)
      if (!this.waybillRenderFilter) {
        done(true);
        return;
      }
      for (const i of this.waybillRenderFilter) {
        if (i.editType) {
          this.$message({
            message: "请先保存！",
            type: "warning"
          });
          return false;
        }
      }

      done(true);
    },
    changeJiufangImporter() {
      if (
        this.importInfo.isJiufangImporter &&
        this.importInfo.isJiufangImporter !== null &&
        this.importInfo.isJiufangImporter !== ""
      ) {
        this.importInfo.importerCompanyName = "";
        this.importInfo.importerLinkMan = "";
        this.importInfo.importerPhone = "";
        this.importInfo.vat = "";
        this.importInfo.eori = "";
        this.importInfo.importerAddress = "";
        this.importInfo.importerZipCode = "";
      }
    },
    clickSelectBtn() {
      this.selectImporterType = true;
      if (this.selectImporterType) {
        this.importInfo.isJiufangImporter = 0;
      }
    },
    async getInfo() {
      let res = await ajax(
        "queryCustomerImporter",
        {
          cuser: this.constants.customerId
        },
        this.attrs
      );
      console.log(res);
      this.waybillRender = res;
      for (const i of this.waybillRender) {
        i.importerZipCode = i.zipCode;
        i.selectType = false;
        i.editType = false;
      }
    },
    jumpToChannelDetails(id) {
      window.open("/#/main/setting__customerchannel__list?id=" + id, "_blank");
    },
    jumpToCustomerImportDetails(id) {
      window.open("/#/main/customer__importer__list?pid=" + id, "_blank");
    },
    changeForecastInfo(orderFlag) {
      console.log("orderFlag :>> ", orderFlag);
      this.$set(this.Constatvariable, "orderFlag", orderFlag);
      if (this.Constatvariable.etInStock) {
        const etInStock = this.Constatvariable.etInStock.split(" ");
        this.Constatvariable.etInStockDay = etInStock[0];
        this.Constatvariable.etInStockTime = etInStock[1];
      }
      this.channelInitMap[
        this.Constatvariable["inStockChannel"]
      ] = this.channelOptions[this.Constatvariable["inStockChannel"]];
      this.centerDialogVisible = true;

      // if (this.isShowChangeForecastInfo) {
      //   this.$confirm("确认保存修改？")
      //     .then(_ => {
      //       // TODO 保存操作
      //     this.forecastForm['id'] = this.waybillId
      //     console.log("waybilleId:",this.waybillId)
      //     var param =  this.forecastForm
      //     ajax("changeForecastInfo",param).then(res => {
      //       if (res.code != 200) {
      //         if(null != res.message){
      //           this.$message.error(m(res.message));
      //         }else{
      //           this.$message.error("修改失败!");
      //         }
      //       }else{
      //          this.$message.success("修改成功!");
      //       }
      //     },
      //     error => {
      //       console.log(error);
      //     }
      //   );})
      //     .catch(_ => {});
      // } else {
      //   this.isShowChangeForecastInfo = true;
      // }
    },
    changeInStockInfo() {
      if (this.isChangeinStockInfo) {
        this.stockInfo["id"] = this.waybillId;
        var param = this.stockInfo;
        ajax("changeInStockInfo", param).then(
          res => {
            if (res.code != 200) {
              if (null != res.message) {
                this.$message.error(m(res.message));
              } else {
                this.$message.error("修改失败!");
              }
            } else {
              this.$message.success("修改成功!");
            }
          },
          error => {
            console.log(error);
          }
        );

        this.isChangeinStockInfo = false;
      } else {
        this.isChangeinStockInfo = true;
      }
    },

    changeStockInfo() {
      if (this.isChangeStockInfo) {
        this.stockInfo["id"] = this.waybillId;
        var param = this.stockInfo;
        ajax("changeStockInfo", param).then(
          res => {
            if (res.code != 200) {
              if (null != res.message) {
                this.$message.error(m(res.message));
              } else {
                this.$message.error("修改失败!");
              }
            } else {
              this.$message.success("修改成功!");
            }
          },
          error => {
            console.log(error);
          }
        );

        this.isChangeStockInfo = false;
      } else {
        this.isChangeStockInfo = true;
      }
    },
    trim(str) {
      let result;
      if (str) {
        result = str.replace(/\s/g, ""); // 去除字符串全部空格
      }
      return result ? result : "";
    },
    changeImportInfo() {
      if (this.isChangeImportInfo) {
        this.importInfo["id"] = this.waybillId;
        if (
          this.importInfo.isJiufangImporter &&
          this.importInfo.isJiufangImporter !== null &&
          this.importInfo.isJiufangImporter !== undefined
        ) {
          this.importInfo.importerCompanyName = "九方";
          this.importInfo.importerLinkMan = "九方";
          this.importInfo.importerPhone = "九方";
          this.importInfo.vat = "九方";
          this.importInfo.eori = "九方";
          this.importInfo.importerAddress = "九方";
          this.importInfo.importerZipCode = "九方";
        }
        var param = this.importInfo;
        // 去字符串空格
        let vat = this.trim(param.vat);
        param.vat = vat;
        let eori = this.trim(param.eori);
        param.eori = eori;
        ajax("changeImportInfo", param).then(
          res => {
            if (res.code != 200) {
              if (null != res.message) {
                this.$message.error(res.message);
              } else {
                this.$message.error("修改失败!");
              }
            } else {
              this.$message.success("修改成功!");
              this.forecastForm = res.data;
              this.stockInfo = res.data;
            }
          },
          error => {
            console.log(error);
          }
        );
        this.isChangeImportInfo = false;
      } else {
        this.isChangeImportInfo = true;
      }
    },
    changeSenderInfo() {
      if (this.isChangeSenderInfo) {
        this.senderInfo["id"] = this.waybillId;
        var param = this.senderInfo;
        ajax("changeSenderInfo", param).then(
          res => {
            if (res.code != 200) {
              if (null != res.message) {
                this.$message.error(m(res.message));
              } else {
                this.$message.error("修改失败!");
              }
            } else {
              this.$message.success("修改成功!");
              this.forecastForm = res.data;
              this.stockInfo = res.data;
            }
          },
          error => {
            console.log(error);
          }
        );
        this.isChangeSenderInfo = false;
      } else {
        this.isChangeSenderInfo = true;
      }
    },
    changeS(val) {
      console.log("val", val);
    },
    showMergerDeclarationNo() {
      this.dialog(this.forecastForm.mergerDeclarationNo);
    }
  }
};
</script>
<style scoped>
/deep/ .el-form-item.el-form-item--mini {
  margin-bottom: 0 !important;
}
.icoFontlist {
  width: 100%;
  font-size: 12px;
  overflow: hidden;
  text-align: left;
  word-wrap: break-word;
  word-break: normal;
}
/* /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
  color: green;
}
/deep/.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: green;
  border-color: green;
}
/deep/.el-checkbox__inner:hover {
  border-color: green;
}
/deep/.el-checkbox__inner::after {
  border: 1px solid #fff;
  border-left: 0;
  border-top: 0;
} */
</style>
<style lang="scss" scoped>
.dialog-main {
  background: #f5f9fc;
  padding: 12px 16px;
  max-height: 500px;
  overflow-y: scroll;
  .card-main {
    padding: 20px 20px;
    position: relative;
    &:not(:last-child) {
      margin-bottom: 20px;
    }
    // .form-main {
    //   padding: 20px 20px 0;
    //   position: relative;
    .icon-edit {
      position: absolute;
      z-index: 100;
      top: 0;
      right: 0;
      height: 60px;
      font-size: 20px;
      color: #409eff;
      padding-right: 10px;
      i {
        cursor: pointer;
      }
      span {
        cursor: pointer;
        font-size: 12px;
      }
    }
    // }
  }
  .selectCart {
    box-shadow: 0 2px 12px 0 rgba(67, 201, 162, 1);
  }
}
</style>
